<template>
	<view class="warp">
		<!-- 内容区域 -->
		<view class="content">
			<u-form ref="uform" :model="form" :rules="rules">
				<uni-card title="添加记录" is-shadow>
					<view class="form-section">
						<!-- 记录时间 -->
						<!-- <u-form-item label="记录时间:" label-width="100px" prop="operTime">
							<uni-datetime-picker type="datatime" v-model="form.operTime" style="width: 40vw;" />
						</u-form-item> -->

						<!-- 方位信息 -->
						<u-form-item label="方位:" label-width="100px" prop="lines">
							<zxz-uni-data-select v-model="form.lines" dataKey="dictLabel" dataValue="dictValue"
								:localdata="lineOptions" collapse-tags :collapse-tags-num="1" filterable multiple />
						</u-form-item>

						<!-- 出料口信息 -->
						<u-form-item label="出料口:" label-width="100px" prop="ports">
							<zxz-uni-data-select v-model="form.ports" dataKey="dictLabel" dataValue="dictValue"
								:localdata="portOptions" collapse-tags :collapse-tags-num="1" filterable multiple />
						</u-form-item>

						<!-- 跺位 -->
						<u-form-item label="跺位:" label-width="100px" prop="storageBay">
							<u-input v-model="form.storageBay" type="number" placeholder="请输入跺位" />
						</u-form-item>
						<!-- 水分 -->
						<u-form-item label="水分:" label-width="100px" prop="moiture">
							<u-input v-model="form.moiture" type="number" placeholder="请输入水分值" />
						</u-form-item>
						<!-- 呕吐 -->
						<u-form-item label="呕吐:" label-width="100px" prop="deoxynivalenol">
							<u-input v-model="form.deoxynivalenol" type="number" placeholder="请输入呕吐值" />
						</u-form-item>

						<!-- 赤霉素 -->
						<u-form-item label="赤霉:" label-width="100px" prop="fusariumToxin">
							<u-input v-model="form.fusariumToxin" type="number" placeholder="请输入赤霉值" />
						</u-form-item>

						<!-- 黄曲霉毒素 -->
						<u-form-item label="黄曲:" label-width="100px" prop="aflatoxin">
							<u-input v-model="form.aflatoxin" type="number" placeholder="请输入黄曲值" />
						</u-form-item>

						<!-- 色号 -->
						<u-form-item label="色号:" label-width="100px" prop="colorCode">
							<u-input v-model="form.colorCode" type="number" placeholder="请输入色号值" />
						</u-form-item>
						<!-- 色号 -->
						<u-form-item label="备注:" label-width="100px" prop="remark">
							<uni-easyinput type="textarea" autoHeight v-model="form.remark" placeholder="请输入内容"
								maxlength="255" />
						</u-form-item>
					</view>
				</uni-card>
			</u-form>

			<!-- 底部按钮 -->
			<view class="footer">
				<u-button type="primary" @click="onSubmit">提交</u-button>
				<u-button @click="reset">重置</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		add,
		getDetail,
		edit
	} from '@/api/work/produce/feedTemp/index.js';

	export default {
		data() {
			return {
				form: {
					line: '', // 方位
					port: '', // 出料口
					lines: [], // 方位
					ports: [], // 出料口
					moiture: '', // 水分
					deoxynivalenol: '', // 赤霉素
					aflatoxin: '', // 黄曲霉毒素
					colorCode: '', // 色号
				},
				lineOptions: [], // 方位选择数据
				portOptions: [], // 出料口选择数据
				// 表单验证规则
				rules: {
					operTime: [{
						required: true,
						message: '记录时间不能为空',
						trigger: 'blur'
					}],
					lines: [{
						required: true,
						type: 'array',
						min: 1, // 至少选择一个方位
						message: '方位不能为空',
						trigger: 'blur',
					}],
					ports: [{
						required: true,
						type: 'array',
						min: 1, // 至少选择一个出料口
						message: '出料口不能为空',
						trigger: 'blur',
					}],
				}
			};
		},
		onLoad(options) {
			this.getDictList(); // 获取字典数据
			this.getDetail(options.recordId); // 获取详情数据
		},

		methods: {
			// 获取字典数据（方位、出料口等）
			getDictList() {
				uni.getStorage({
					key: 'discharge_line',
					success: (resp) => {
						this.lineOptions = resp.data
					}
				})
				uni.getStorage({
					key: 'discharge_outlet',
					success: (resp) => {
						this.portOptions = resp.data
					}
				})
			},
			// 获取详情数据
			getDetail(recordId) {
				if (recordId) {
					getDetail(recordId).then(res => {
						this.form = res.data;
					});
				}
			},
			// 提交表单
			onSubmit() {
				this.$refs.uform.validate().then(res => {
					if (res) {
						if (this.form.recordId) {
							// 编辑
							edit(this.form).then(res => {
								if (res.code === 200) {
									this.$modal.msgSuccess("修改成功");
									setTimeout(() => {
										uni.redirectTo({
											url: `/pages/work/produce/feedTemp/feedTempItem?recordId=${this.form.recordId}`
										})
									}, 500)
								} else {
									this.$modal.msgError("修改失败");
								}
							});
						} else {
							// 表单验证通过，提交数据
							add(this.form).then(res => {
								if (res.code === 200) {
									this.$modal.msgSuccess("添加成功");
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/work/produce/feedTemp/index'
										})
									}, 500)
								} else {
									this.$modal.msgError("添加失败");
								}
							});
						}
					}
				})
			},
			// 重置表单
			reset() {
				this.form = {};
				this.$refs.form.resetFields();
			}
		},
	};
</script>

<style lang="scss">
	.warp {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		/* 确保内容区域填满屏幕 */
		width: 100vw;
		background-color: #f5f5f5;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.form-section {
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.form-label {
		font-weight: bold;
		color: #333;
		width: 30%;
	}

	.form-input {
		width: 60%;
	}

	.footer {
		position: fixed;
		bottom: 0px;
		/* 距离底部20px */
		left: 50%;
		/* 将左边距设置为50% */
		width: 100vw;
		/* 宽度设置为100vw */
		transform: translateX(-50%);
		/* 使用transform将其水平居中 */
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}

	.footer u-button {
		width: 80%;
	}
</style>